{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="{% static "css/admin_custom.css" %}">
<style>
  .stats-container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .stats-card {
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    padding: 20px;
  }
  
  .chart-container {
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    padding: 20px;
    height: 400px;
  }
  
  .area-details {
    border-collapse: collapse;
    width: 100%;
  }
  
  .area-details th, .area-details td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .area-details thead tr {
    background-color: #f5f5f5;
    color: #333;
    text-align: left;
  }
  
  .area-details tbody tr:hover {
    background-color: rgba(26, 115, 232, 0.05);
  }
  
  .progress-container {
    width: 100%;
    background-color: #f1f1f1;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
  }
  
  .progress-bar {
    height: 20px;
    background-color: #1a73e8;
    transition: width 0.5s ease-in-out;
  }
</style>
{% endblock %}

{% block extrahead %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{% static "js/admin_custom.js" %}"></script>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
  &rsaquo; <a href="{% url 'admin:app_list' app_label='airshow' %}">{{ 'Airshow' }}</a>
  &rsaquo; {% translate 'Area Statistics' %}
</div>
{% endblock %}

{% block content %}
<div class="stats-container">
  <h1>展区统计信息</h1>
  
  <div class="stats-card">
    <h2>展区数据概览</h2>
    <p>本页面展示了各个展区的参展商分布情况和统计信息。</p>
  </div>
  
  <div class="chart-container">
    <canvas id="areaChart"></canvas>
  </div>
  
  <div class="stats-card">
    <h2>展区详细数据</h2>
    <table class="area-details">
      <thead>
        <tr>
          <th>ID</th>
          <th>展区名称</th>
          <th>位置</th>
          <th>参展商数量</th>
          <th>占比</th>
        </tr>
      </thead>
      <tbody>
        {% for area in areas_stats %}
        <tr>
          <td>{{ area.area_id }}</td>
          <td>{{ area.name }}</td>
          <td>{{ area.location|default:"-" }}</td>
          <td>{{ area.exhibitor_count }}</td>
          <td>
            <div class="progress-container">
              <div class="progress-bar" style="width: {{ area.exhibitor_count }}%;"></div>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 准备图表数据
  var labels = [{% for area in areas_stats %}'{{ area.name }}'{% if not forloop.last %}, {% endif %}{% endfor %}];
  var data = [{% for area in areas_stats %}{{ area.exhibitor_count }}{% if not forloop.last %}, {% endif %}{% endfor %}];
  
  // 创建图表
  var ctx = document.getElementById('areaChart').getContext('2d');
  var areaChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: '参展商数量',
        data: data,
        backgroundColor: 'rgba(26, 115, 232, 0.7)',
        borderColor: 'rgba(26, 115, 232, 1)',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true
        }
      },
      plugins: {
        title: {
          display: true,
          text: '各展区参展商数量分布'
        }
      }
    }
  });
});
</script>
{% endblock %} 